<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
	font-family:"Arial","微軟正黑體";
}
/*卡片內文*/
.card_container {
	text-align: left;
	padding: 0 5%;
}

.card_span {
	margin: 0% 0 3% 0;
}

.card_spantitle {
	padding-top: 5%;
}

.card_spanchg {
	margin-left: 60%;
}

.peacecard {
	width: 580px;
	background-color: #5C164E;
	border-radius: 5%;
	box-shadow: 4px 4px 12px 4px rgba(20%, 20%, 40%, 0.3);
	width: 580px;
	color: #ffffff;
}

.frame {
	height: 80%;
	width: 100%;
}

svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/**
		 * Paper Plane
		 */
/*Paper Plane: Container*/
.plane-container {
	width: 200px;
	margin: 0px auto;
	z-index: 3;
}
/*Paper Plane: Image*/
.plane {
	width: 100%;
	height: -1%;
}

/*Paper Plane: Animation*/
.plane-container {
	-webkit-animation: paper-plane-scoping 3s alternate infinite;
	-moz-animation: paper-plane-scoping 3s alternate infinite;
	animation: paper-plane-scoping 3s alternate infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	animation-timing-function: linear;
}

@
-webkit-keyframes paper-plane-scoping { 0% {
	-webkit-transform: translateY(-80px);
	-moz-transform: translateY(-80px);
	transform: translateY(-80px);
}

100%
{
-webkit-transform
:
 
translateY
(10px);

		    
-moz-transform
:
 
translateY
(10px);

		    
transform
:
 
translateY
(10px);

		  
}
}
.plane {
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation: paper-plane-soaring 6s forwards infinite;
	-moz-animation: paper-plane-soaring 6s forwards infinite;
	animation: paper-plane-soaring 6s forwards infinite;
}

@
-webkit-keyframes paper-plane-soaring { 0% {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}

40%
{
-webkit-transform
:
 
rotate
(15deg);

		    
-moz-transform
:
 
rotate
(15deg);

		    
transform
:
 
rotate
(15deg);

		  
}
50%
{
-webkit-transform
:
 
rotate
(15deg);

		    
-moz-transform
:
 
rotate
(15deg);

		    
transform
:
 
rotate
(15deg);

		  
}
60%
{
-webkit-transform
:
 
rotate
(-10deg);

		    
-moz-transform
:
 
rotate
(-10deg);

		    
transform
:
 
rotate
(-10deg);

		  
}
70%
{
-webkit-transform
:
 
rotate
(-10deg);

		    
-moz-transform
:
 
rotate
(-10deg);

		    
transform
:
 
rotate
(-10deg);

		  
}
100%
{
-webkit-transform
:
 
rotate
(0deg);

		    
-moz-transform
:
 
rotate
(0deg);

		    
transform
:
 
rotate
(0deg);

		  
}
}

/**
		 * Clouds
		 */
.clouds {
	width: 100%;
	height: 95%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateZ(0);
}

.cloud {
	position: absolute;
	top: 20%;
	width: 300px;
	right: 0;
	opacity: 1;
}

.cloud.front {
	z-index: 9;
}

.cloud.distant {
	z-index: 1;
}

.cloud.background {
	z-index: 1;
}

/*Cloud Sizing*/
.cloud.smaller {
	margin-right: 400px;
	width: 100px;
	margin-top: 50px;
}

.cloud.small {
	margin-right: 200px;
	width: 150px;
}

.cloud.big {
	width: 500px;
	margin-top: 50px;
	margin-right: 150px;
}

.cloud.massive {
	width: 600px;
	margin-top: 20px;
	margin-right: 0px;
}

/*Cloud: Animation*/
.cloud {
	-webkit-animation-name: cloud-movement;
	-webkit-animation-timing-function: linear;
	-webkit-animation-direction: forwards;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 8s;
	-moz-animation-name: cloud-movement;
	-moz-animation-timing-function: linear;
	-moz-animation-direction: forwards;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 8s;
	animation-name: cloud-movement;
	animation-timing-function: linear;
	animation-direction: forwards;
	animation-iteration-count: infinite;
	animation-duration: 8s;
}

.slow {
	-webkit-animation-duration: 9.2s;
	-moz-animation-duration: 9.2s;
	animation-duration: 9.2s;
}

.slower {
	-webkit-animation-duration: 11.2s;
	-moz-animation-duration: 11.2s;
	animation-duration: 11.2s;
}

.slowest {
	-webkit-animation-duration: 13.5s;
	-moz-animation-duration: 13.5s;
	animation-duration: 13.5s;
}

.super-slow {
	-webkit-animation-duration: 20.5s;
	-moz-animation-duration: 20.5s;
	animation-duration: 20.5s;
}

@
-webkit-keyframes cloud-movement { 0% {
	opacity: 0.1;
	-webkit-transform: translateX(300px);
	-moz-transform: translateX(300px);
	transform: translateX(300px);
}
10%
{
opacity
:
 
0
.7
;

		  
}
90%
{
opacity
:
 
0;
}
100%
{
opacity
:
 
0;
-webkit-transform
:
 
translateX
(-1000px);

		    
-moz-transform
:
 
translateX
(-1000px);

		    
transform
:
 
translateX
(-1000px);

		  
}
}
</style>

</head>
<body>
	<div class="peacecard grid_6 grid_6_chg">
		<div class="card_container">
			<h3 class="card_span card_spantitle">
				<span class="">TO: example_receiver</span>
			</h3>
			<p id="preview_text">
			<h4>example_text</h4>
			</p>
			<h3 class="card_span card_spanchg">
				<span class="">From: example_sender</span>
			</h3>
		</div>
		<div class="frame">
			<div class="plane-container">
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					width="1131.53px" height="120px" viewBox="0 0 1131.53 120"
					enable-background="new 0 0 1131.53 120" xml:space="preserve"
					class="plane">
				<polygon fill="#D8D8D8"
						points="72.008,0 274.113,140.173 274.113,301.804 390.796,221.102 601.682,367.302 1131.53,0.223  " />
				<polygon fill="#C4C4C3"
						points="1131.53,0.223 274.113,140.173 274.113,301.804 390.796,221.102   " />
				</svg>

			</div>
		</div>
		<div class="clouds">

			<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
				width="762px" height="331px" viewBox="0 0 762 331"
				enable-background="new 0 0 762 331" xml:space="preserve"
				class="cloud big front slowest">
			<path fill="#FFFFFF"
					d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
			c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
			C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
			S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z" />
			</svg>
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
				width="762px" height="331px" viewBox="0 0 762 331"
				enable-background="new 0 0 762 331" xml:space="preserve"
				class="cloud distant smaller">
			<path fill="#FFFFFF"
					d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
			c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
			C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
			S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z" />
			</svg>

			<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
				width="762px" height="331px" viewBox="0 0 762 331"
				enable-background="new 0 0 762 331" xml:space="preserve"
				class="cloud small slow">
			<path fill="#FFFFFF"
					d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
			c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
			C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
			S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z" />
			</svg>

			<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
				width="762px" height="331px" viewBox="0 0 762 331"
				enable-background="new 0 0 762 331" xml:space="preserve"
				class="cloud distant super-slow massive">
			<path fill="#FFFFFF"
					d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
			c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
			C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
			S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z" />
			</svg>

			<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
				width="762px" height="331px" viewBox="0 0 762 331"
				enable-background="new 0 0 762 331" xml:space="preserve"
				class="cloud slower">
			<path fill="#FFFFFF"
					d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
			c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
			C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
			S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z" />
			</svg>

		</div>

	</div>


</body>
</html>